<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
</head>
<link rel="stylesheet" href="./css/noramlize.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/swiper.min.css">

<body>
	<section class="wrap">
		<header class="head">黑马面面</header>
		<nav class="nav">
			<a href="" class="item">
				<img src="./icon/icon1.png" alt="" srcset="">
				<span>hr面试</span>
			</a>
			<a href="" class="item">
				<img src="./icon/icon2.png" alt="" srcset="">
				<span>笔试</span>
			</a>
			<a href="" class="item">
				<img src="./icon/icon3.png" alt="" srcset="">
				<span>技术面试</span>
			</a>
			<a href="" class="item">
				<img src="./icon/icon4.png" alt="" srcset="">
				<span>模拟面试</span>
			</a>
			<a href="" class="item">
				<img src="./icon/icon5.png" alt="" srcset="">
				<span>面试技巧</span>
			</a>
			<a href="" class="item">
				<img src="./icon/icon6.png" alt="" srcset="">
				<span>薪资查询</span>
			</a>
		</nav>

		<section class="go">
			<img src="./img/go.png" alt="">
		</section>
	</section>

	<!-- 就业指导模块 -->
	<section class="content">
		<div class="con_hd">
			<h4>
				<span class="icon">
					<img src="./icon/i2.png" alt="">
				</span>
				就业指导
			</h4>

			<a href="">更多>></a>
		</div>


		<!-- 旋转木马轮播图 -->
		<div class="get_job_foncus">
			<div class="swiper-container get_job_fo">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href=""><img src="./img/pic.png" alt=""></a>
						<p>老师教你面试技巧</p>
					</div>
					<div class="swiper-slide">
						<a href=""><img src="./img/3.jpg" alt=""></a>
						<p>老师教你面试技巧</p>

					</div>
					<div class="swiper-slide">
						<a href=""><img src="./img/ldh.jpg" alt=""></a>
						<p>老师教你面试技巧</p>

					</div>

				</div>

			</div>
			
		</div>
	</section>

	<!-- 充电学习模块 -->
	<section class="content content_con">
		<div class="con_hd">
			<h4>
				<span class="icon">
					<img src="./icon/i2.png" alt="">
				</span>
				充电学习
			</h4>

			<a href="">更多>></a>
		</div>

		<!-- 学习模块轮播 -->
		<div class="study">

			<!-- Swiper -->
			<div class="swiper-container stydy_fo">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic2.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic2.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>
					<div class="swiper-slide">
						<img src="./img/pic1.png" alt="">
						<h5>说低调英语,告别中式英语</h5>
						<p>156人学习</p>
					</div>

				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
	</section>


	<!-- 底部footer -->
	<footer class="footer">
		<a href="" class="item">
			<img src="./icon/home.png" alt="">
			<p>首页</p>
		</a>
		<a href="" class="item">
			<img src="./icon/ms.png" alt="">
			<p>模拟面试</p>

		</a>
		<a href="" class="item">
			<img src="./icon/net.png" alt="">
			<p>技术面试</p>

		</a>
		<a href="" class="item">
			<img src="./icon/user.png" alt="">
			<p>我的</p>
		</a>
	</footer>




	<script src="./js/index.js"></script>
	<script src="./js/swiper.min.js"></script>


	<script>
		(function () {
			var swiper = new Swiper('.get_job_fo', {
				slidesPerView: 2,
				spaceBetween: 30,
				centeredSlides: true,
				loop: true,
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});
		})();

		// 如果多个轮播图new的类名一样会起冲突,要将其换掉
		// 第二个轮播图
		(function () {
			var swiper = new Swiper('.stydy_fo', {
				slidesPerView: 2.5,
				spaceBetween: 20,
				
			});
		})()
	</script>
</body>


</html>